<template>
  <div style="margin-top: 10px; width: 100%;">
    <Table :columns="allSeverColumn" :data="severs" border>
      <template slot-scope=" { row, index }" slot="select">
        <Checkbox v-model="severs[index].check" :disabled="row.disabled">
          <span></span>
        </Checkbox>
      </template>
      <template slot-scope="{ row, index }" slot="severName">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit))) ">
          {{severs[index].severName ? severs[index].severName:(severs[index].service?severs[index].service.severName:"")}}
        </p>
        <Select v-else v-model="severs[index].severId" :transfer="true" @on-change="setSeverID(index)">
          <template v-for="i in allServerList ">
            <Option :value="i.id" :label="i.severName">
              <Tooltip max-width="300" :disabled="tooltipDisabled" placement="right-end" :transfer="true"
                style="white-space: nowrap;">
                <p style="width: 100%;">{{i.severName}}</p>
                <div slot="content" style="font-size:0;">
                  <p class="p_content">CPU数量：{{i.cpuQuantity}}</p>
                  <p class="p_content">CPU型号：{{i.cpuDes}}</p>
                  <p class="p_content">网卡数量：{{i.ncquantity}}</p>
                  <p class="p_content">网卡型号：{{i.ncdes}}</p>
                  <p class="p_content">内存数量：{{i.ramQuantity}}</p>
                  <p class="p_content">内存型号：{{i.ramDes}}</p>
                  <p class="p_content">数据盘: {{i.dataVolumn + i.dataUnit}}</p>
                  <p class="p_content">系统盘: {{i.sysVolumn + i.sysUnit}}</p>
                </div>
              </Tooltip>
            </Option>
          </template>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="os">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].os}}</p>
        <Select v-else v-model="severs[index].os" :transfer="true" >
          <Option value="suse">suse</Option>
          <Option value="bc-linux">bc-linux</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="sysRaid">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].sysRaid}}</p>
        <Select v-else v-model="severs[index].sysRaid" :transfer="true" >
          <template v-for="item in allServerList ">
            <template v-if="item.id == severs[index].severId">
              <Option v-for="(raid, k) in item.raidOptions" :key="k" :value="raid">{{raid}}</Option>
            </template>
          </template>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="dataRaid">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].dataRaid}}</p>
        <Select v-else v-model="severs[index].dataRaid" :transfer="true" >
          <template v-for="item in allServerList ">
            <template v-if="item.id == severs[index].severId">
              <Option v-for="(raid, k) in item.raidOptions" :key="k" :value="raid">{{raid}}</Option>
            </template>
          </template>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="place">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].place}}</p>
        <Select v-else v-model="severs[index].place" :transfer="true" >
          <Option value="dmz域">dmz域</Option>
          <Option value="核心域">核心域</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="quantity">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].quantity}}</p>
        <InputNumber v-else :min="0" v-model="severs[index].quantity" />
      </template>
      <template slot-scope="{ row, index }" slot="purpose">
        <p v-if="(!row.isEdit || ifedit) && (((ifedit || (row.forToolServiceIds && row.forToolServiceIds.length != 0)) && type != 'tool') || (type == 'tool' && (!isEditTool || ifedit)))">{{severs[index].purpose}}</p>
        <Input v-else v-model="severs[index].purpose" type="textarea" :autosize="{minRows: 1,maxRows: 6}" />
      </template>
      <template slot-scope="{ row, index }" slot="forTool">
        <p>{{severs[index].forTool ? (severs[index].forTool) : ""}}</p>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <Button v-if="!ifedit && ((type == 'tool' && isEditTool) || (type != 'tool' && (!row.forToolServiceIds || row.forToolServiceIds.length == 0)))" @click="deleteRow(row, index)">删除</Button>
        <Poptip :transfer="true" placement="top-end">
          <Button>基础信息</Button>
          <template v-if="severs[index].service">
            <div slot="title">
              {{severs[index].service.severName}}
            </div>
            <div slot="content">
              <div slot="content" style="font-size:0;">
                <p class="p_content">CPU数量:
                  {{severs[index].cpuQuantity ? severs[index].cpuQuantity:severs[index].service.cpuQuantity}}
                </p>
                <p class="p_content">CPU型号: {{severs[index].cpuDes ? severs[index].cpuDes:severs[index].service.cpuDes}}
                </p>
                <p class="p_content">网卡数量:
                  {{severs[index].ncquantity ? severs[index].ncquantity:severs[index].service.ncquantity}}
                </p>
                <p class="p_content">网卡型号: {{severs[index].ncdes ? severs[index].ncdes:severs[index].service.ncdes}}</p>
                <p class="p_content">内存数量:
                  {{severs[index].ramQuantity ? severs[index].ramQuantity:severs[index].service.ramQuantity}}
                </p>
                <p class="p_content">内存型号: {{severs[index].ramDes ? severs[index].ramDes:severs[index].service.ramDes}}
                </p>
                <p class="p_content">数据盘:
                  {{(severs[index].dataVolumn + severs[index].dataUnit) ? (severs[index].dataVolumn + severs[index].dataUnit):(severs[index].service.dataVolumn + severs[index].service.dataUnit)}}
                </p>
                <p class="p_content">系统盘:
                  {{(severs[index].sysVolumn + severs[index].sysUnit) ? (severs[index].sysVolumn + severs[index].sysUnit):(severs[index].service.sysVolumn + severs[index].service.sysUnit)}}
                </p>
              </div>
            </div>
          </template>
          <template v-else>
            <div slot="title">
              {{severs[index].severName}}
            </div>
            <div slot="content">
              <div slot="content" style="font-size:0;">
                <p class="p_content">CPU数量: {{severs[index].cpuQuantity }}</p>
                <p class="p_content">CPU型号: {{severs[index].cpuDes }}</p>
                <p class="p_content">网卡数量: {{severs[index].ncquantity }}</p>
                <p class="p_content">网卡型号: {{severs[index].ncdes}}</p>
                <p class="p_content">内存数量: {{severs[index].ramQuantity}}</p>
                <p class="p_content">内存型号: {{severs[index].ramDes }}</p>
                <p class="p_content">数据盘: {{(severs[index].dataVolumn + severs[index].dataUnit) }}</p>
                <p class="p_content">系统盘: {{(severs[index].sysVolumn + severs[index].sysUnit)}}</p>
              </div>
            </div>
          </template>
        </Poptip>
      </template>
    </Table>
    <div v-if="isEdit == 23 && !ifedit" style="margin-top: 10px; text-align: right;">
      <Button v-if="!unionServer" type="primary" @click="openUnion">开启合并</Button>
      <template v-else>
        <Button type="primary" @click="union">合并</Button>
        <Button type="primary" @click="offUnion">取消合并</Button>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: "server_model",
    components: {},
    data() {
      return {
        unionServer: false,
        tooltipDisabled: false,
        oldServerList: [], //合并前历史数据
        allSeverColumn: [],
        severColumns: [{
            title: "*服务类型",
            align: "center",
            width: 140,
            key: "severName",
            slot: "severName",
            fixed: 'left'
          },
          {
            title: "*操作系统",
            align: "center",
            width: 110,
            key: "id",
            slot: "os"
          },
          {
            title: "*raid方式",
            align: "center",
            children: [{
                title: '*系统盘',
                align: 'center',
                width: 110,
                slot: "sysRaid"
              },
              {
                title: '*数据盘',
                align: 'center',
                width: 110,
                slot: "dataRaid"
              },
            ]
          },
          {
            title: "*部署区域",
            align: "center",
            width: 110,
            slot: "place"
          },
          {
            title: "*台数",
            align: "center",
            width: 90,
            slot: "quantity"
          },
          {
            title: "测算依据/必要性说明",
            align: "center",
            minWidth: 180,
            slot: "purpose"
          },
        ],
        printColumns: [{
            title: "*服务类型",
            align: "center",
            width: 140,
            key: "severName",
            slot: "severName",
          },
          {
            title: "*操作系统",
            align: "center",
            width: 110,
            key: "id",
            slot: "os"
          },
          {
            title: "*raid方式",
            align: "center",
            children: [{
                title: '*系统盘',
                align: 'center',
                width: 110,
                slot: "sysRaid"
              },
              {
                title: '*数据盘',
                align: 'center',
                width: 110,
                slot: "dataRaid"
              },
            ]
          },
          {
            title: "*部署区域",
            align: "center",
            width: 110,
            slot: "place"
          },
          {
            title: "*台数",
            align: "center",
            width: 90,
            slot: "quantity"
          },
          {
            title: "测算依据/必要性说明",
            align: "center",
            minWidth: 180,
            slot: "purpose"
          },
        ],
      }
    },
    created: function() {
    },
    mounted: function() {
      if(this.isPrint){
        this.allSeverColumn = this.printColumns
      }else{

        if (this.isApply) {
          this.severColumns.push({
            title: "数据来源",
            align: "center",
            width: 140,
            key: "forTool",
            slot: "forTool",
          })
        }
        this.severColumns.push({
          slot: 'action',
          align: 'center',
          width: 166,
          fixed: 'right',
          renderHeader: (h, index) => {
            return h('div', [
              h(!this.ifedit && ((this.type == 'tool' && this.isEditTool) || this.type != 'tool') ? 'Button' : "", {
                props: {
                  type: 'primary',
                  // size: 'small'
                },
                on: {
                  click: () => {
                      this.addRow()
                  }
                }
              }, !this.ifedit && ((this.type == 'tool' && this.isEditTool) || this.type != 'tool') ? '新增' : "")
            ])
          }
        })

        this.allSeverColumn = this.severColumns
      }
    },
    methods: {
      /**
       * 合并
       */
      union(){
        var forTool = "合并: "
        var forToolServiceIds = []
        var checkNum = 0
        this.severs.forEach(sever =>{
          if(sever.check){
            checkNum ++
          }
        })
        if(checkNum > 1){
          this.severs.forEach(sever =>{
            if(sever.check){
              sever.disabled = true
              forTool += sever.forTool + ";"
              if(sever.forToolServiceIds){
                forToolServiceIds = forToolServiceIds.concat(sever.forToolServiceIds)
              }
            }
          })
          this.severs.push({
            isEdit: true,
            forTool: forTool,
            forToolServiceIds: forToolServiceIds,
            "cpuQuantity": 0,
            "dataRaid": "",
            "os": "",
            "overId": 0,
            "purpose": "",
            "quantity": 0,
            "ramQuantity": 0,
            "severId": 0,
            "severName": "",
            "status": 0,
            "sysRaid": "",
            "place": "",
            "sysUnit": "",
            "sysVolumn": 0,
            "dataUnit": "",
            "dataVolumn": 0,
          })
        }else {
          this.$Message.info("请至少选择两条数据合并")
        }
      },
      /**
       * 取消合并
       */
      offUnion() {
        this.unionServer = false
        this.allSeverColumn = this.severColumns
        this.severs = this.oldServerList
        this.$forceUpdate()
      },
      /**
       * 开启合并功能
       */
      openUnion() {
        var temp = []
        temp.push({
            title: ' ',
            width: 60,
            align: 'center',
            slot: "select",
            fixed: 'left'
        })
        this.allSeverColumn = temp.concat(this.allSeverColumn)
        this.unionServer = true
        this.oldServerList = JSON.parse(JSON.stringify(this.severs))
        this.$forceUpdate()
      },
      /**
       * 资源清单，添加
       */
      addRow() {
        console.log("this.tool = ", this.tool)
        this.severs.push({
          "cpuQuantity": 0,
          "dataRaid": "",
          forTool: this.tool ? this.tool.toolName:"自定义",
          forToolServiceIds: this.tool ? [this.tool.toolId]:[],
          "os": "",
          "overId": 0,
          "purpose": "",
          "quantity": 0,
          "ramQuantity": 0,
          "severId": 0,
          "severName": "",
          "status": 0,
          "sysRaid": "",
          "place": "",
          "sysUnit": "",
          "sysVolumn": 0,
          "dataUnit": "",
          "dataVolumn": 0,
        })
      },
      /**
       * 选择服务器，设置基础信息
       * @param {Object} index
       */
      setSeverID(index) {
        this.tooltipDisabled = true
        this.allServerList.some(item => {
          if (item.id == this.severs[index].severId) {
            console.log("item.severName  = ", item.severName)
            this.severs[index].severName = item.severName
            this.severs[index].ramQuantity = item.ramQuantity
            this.severs[index].ramDes = item.ramDes
            this.severs[index].cpuQuantity = item.cpuQuantity
            this.severs[index].cpuDes = item.cpuDes

            this.severs[index].sysUnit = item.sysUnit
            this.severs[index].sysVolumn = item.sysVolumn
            this.severs[index].dataUnit = item.dataUnit
            this.severs[index].dataVolumn = item.dataVolumn
            this.severs[index].ncquantity = item.ncquantity
            this.severs[index].ncdes = item.ncdes
            return true
          }
        })
        setTimeout(() => {
          this.$nextTick(() => {
            this.tooltipDisabled = false
          })
        }, 500)
      },

      /**
       * 删除资源清单
       * @param {Object} roew
       * @param {Object} index
       */
      deleteRow(roew, index) {
        this.severs.splice(index, 1);
      },
    },
    props: {
      isPrint: {
        default: false
      },
      tool: {},
      type: {},
      isEdit: {},
      allServerList: {},
      isApply: {
        default: false
      },
      ifedit: {},
      value: {},
      isEditTool: {
        default: false
      },
      toolInfo: {}
    },
    computed: {
      severs: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
    },
    watch: {}

  }
</script>

<style scoped="">
  .p_content {
    font-size: 13px;
    min-width: 100px;
    max-width: 200px;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    padding-bottom: 4px;
  }

  .ivu-tooltip {
    width: 100%;
  }
  .ivu-table-wrapper-with-border{
    width: 100%;
  }
</style>
